En el siguiente código:
import React from 'react'; import { Avatar, Menu, MenuItem, Tooltip, Box, } from '@mui/material'; import PropTypes from 'prop-types'; // eslint-disable-next-line no-unused-vars import { positions } from '@mui/system'; const menuItems = ['Test', 'Yes', 'No']; function PositionedMenu(props) { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const { boxStyle: PropTypes.object} = props; ...Recibo el siguiente error en la posición específica - PropTypes.object (donde valido boxStyles): Error de análisis: Token inesperado, esperado ",".
¿Por qué está pasando esto? Estoy usando React con eslint configurado para las opciones de airbnb.
Está desestructurando en esa línea, si desea establecer el valor predeterminado, debe usar = char y no :
const { boxStyle = PropTypes.object} = props;
Y sí, esta no es la forma de establecer propTypes. Aquí hay un ejemplo de documentos:
Basado en clases:
import PropTypes from 'prop-types'; class Greeting extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } Greeting.propTypes = { name: PropTypes.string };Basado en funciones:
import PropTypes from 'prop-types' function HelloWorldComponent({ name }) { return ( <div>Hello, {name}</div> ) } HelloWorldComponent.propTypes = { name: PropTypes.string } export default HelloWorldComponent A veces, cuando configuramos props, pensamos que prop es solo del tipo object . Pero debido a muchos factores (por ejemplo, cómo obtenemos los datos y establecemos accesorios), un accesorio puede no estar undefined durante un período de tiempo inicial (muy corto) y luego definirse como un object una vez que se cargan los datos.
Para evitarlo puedes:
Cambie la forma en que se suministran los datos y, por lo tanto, asegúrese de que la propiedad sea siempre un object .
Permitir propTypes para ambos valores: undefined (para el momento inicial) y luego object también una vez que se carga. Aquí se explica cómo especificar varios propTypes (sin el uso de accesorios predeterminados):
// An object that could be one of many types optionalUnion: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.instanceOf(Message) ]),Puede pasar boxStyle padre a componente hijo y usarlo.
// Parent component function ParentComponent(props) { render( <childComponent boxStyle={{ background: 'red'}} /> ) } // Child Component function childComponent(props) { const { boxStyle } = props; const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); } childComponent.propTypes = { boxStyle: PropTypes.object };